<!--
 * @Descripttion: your project
 * @Author: Jerry
 * @Date: 2023-04-04 18:19:19
 * @LastEditors: Jerry
 * @LastEditTime: 2023-04-10 16:25:20
-->


<template>
  <div class="adminHome-vue">
    <div class="main">
      <div class="admin-left-block">
        <div class="data-wrapper">
          <CRow class="data-row">
            <CCol class="topdivstyle">
              <!-- <div style="position: absolute;width: 12px;height: 12px;float: right;right: 6px;">
                              <img src="../assets/icons/ebe3.png" alt />
              </div>-->
              <div class="container">
                <div
                  class="left-group"
                  @click="$router.push({ name: 'statistics' })"
                >
                  <!-- <img
                    src="../../../public/img/Icon2.png"
                    alt
                    class="topimgstyle"
                  /> -->
                  <i class="fa fa-server"></i>
                </div>
                <div class="mid-group">
                  <!-- <span class="titlestyle">总数据接收量</span>
                              <br />
                  <span class="titlestyle2">{{0}}</span>-->
                </div>
                <div class="right-group">
                  <span class="titlestyle1">总处理量(GB)</span>
                  <br />
                  <span class="titlestyle3">{{
                    numSize === undefined ? 0 : numSize
                  }}</span>
                </div>
              </div>
            </CCol>
            <CCol class="topleftdivstyle">
              <!-- <div style="position: absolute;width: 12px;height: 12px;float: right;right: 6px;">
                              <img src="../assets/icons/ebe3.png" alt />
              </div>-->
              <div class="container">
                <div
                  class="left-group"
                  @click="$router.push({ name: 'statistics' })"
                >
                  <!-- <img
                    src="@/assets/icons/_s-icon.png"
                    alt
                    class="topimgstyle"
                  /> -->
                  <i class="fa fa-files-o"></i>
                </div>
                <div class="mid-group">
                  <!-- <span class="titlestyle">算法总数(个)</span>
                                    <br />
                  <span class="titlestyle2">{{total}}</span>-->
                </div>
                <div class="right-group">
                  <span class="titlestyle1">总处理景数(景)</span>
                  <br />
                  <span class="titlestyle3">{{
                    numNumber === undefined ? 0 : numNumber
                  }}</span>
                </div>
              </div>
            </CCol>
          </CRow>

          <CRow class="data-row">
            <CCol class="topdivstyle">
              <div class="container">
                <div
                  class="left-group"
                  @click="$router.push({ name: 'allTask' })"
                >
                  <!-- <img
                    src="../../../public/img/Icon3.png"
                    alt
                    class="topimgstyle"
                  /> -->
                  <i class="fa fa-database"></i>
                </div>
                <div class="mid-group"></div>
                <div class="right-group">
                  <span class="titlestyle1">总任务个数(个)</span>
                  <br />
                  <span class="titlestyle3">{{
                    taskDetailTotal === undefined ? 0 : taskDetailTotal
                  }}</span>
                </div>
              </div>
            </CCol>
            <CCol class="topleftdivstyle">
              <div class="container">
                <div
                  class="left-group"
                  @click="$router.push({ name: 'algoManage' })"
                >
                  <!-- <img
                    src="../../../public/img/Icon4.png"
                    alt
                    class="topimgstyle"
                  /> -->
                  <i class="fa fa-cogs"></i>
                </div>
                <div class="mid-group"></div>
                <div class="right-group">
                  <span class="titlestyle1">算法总数(个)</span>
                  <br />
                  <span class="titlestyle3">{{ total }}</span>
                </div>
              </div>
            </CCol>
          </CRow>
        </div>

        <div class="task-monitor-wrapper" style="min-height:10%">
          <CCol class="task-monitor-col">
            <div class="tab-header">
              <div class="left-group1" @click="totaskMonitor">
                <img
                  src="../../../public/img/分类条.png"
                  alt
                  class="selectimgstyle"
                />
                <span class="span1style" title="点击进入任务监控" style="cursor:pointer;">任务监控</span>
              </div>
            </div>
            <CRow class="task-monitorTable-row">
              <!-- tablePosition -->
              <!--  <div  ref="ffff"  style="width: 100%;height: calc(100vh - 660px)">
                  <Table :height="tableHeight"   stripe  highlight-row ref="currentRowTable" :columns="columns" :data="Taskdata" style="width: 100%" >
                    <template slot-scope="{ row, index }" slot="show_details2">
                      <button
                              disabled
                              v-if="row.status == 1"
                              class="stastusBtn executing"
                      >
                        执行中
                      </button>
                      <button
                              disabled
                              v-if="row.status == 2"
                              class="stastusBtn pause"
                      >
                        暂停
                      </button>
                      <button
                              disabled
                              v-if="row.status == 3"
                              style="color: #f9b115"
                      >
                        删除
                      </button>
                      <button
                              disabled
                              v-if="row.status == 4"
                              class="stastusBtn success"
                      >
                        完成
                      </button>
                      <button
                              disabled
                              v-if="row.status == 5"
                              class="stastusBtn success"
                      >
                        完成
                      </button>
                      <button
                              disabled
                              v-if="row.status == 6"
                              style="color: #f9b115"
                      >
                        超时
                      </button>
                      <button
                              disabled
                              v-if="row.status == 7"
                              class="stastusBtn stop"
                      >
                        停止
                      </button>
                      <button
                              disabled
                              v-if="row.status == 8"
                              class="stastusBtn pending"
                      >
                        待执行
                      </button>
                    </template>
                  </Table>
                </div>-->
              <CDataTable
                class="homeTask"
                :items="Taskdata"
                :fields="Taskfields"
                hover
                border              
              >            
                <template #groupTaskName="{ item }">
                  <td :title="item.groupTaskName" @click="toDetail(item)"  style="cursor:pointer;">{{ item.groupTaskName }}</td>
                </template>
                <template #show_details2="{ item }" style="cursor:default;">
                  <td style="cursor:default">
                    <CButton
                      disabled
                      block
                      v-if="item.status == 1"
                      variant="ghost"
                      style="color: #67c23a ;cursor:auto;"
                    >
                      执行中
                    </CButton>
                    <CButton
                      disabled
                      block
                      v-if="item.status == 2"
                      variant="ghost"
                      style="color: #21c8cc;cursor:auto;"
                    >
                      暂停
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 3"
                      style="color: #80848b;cursor:auto;"
                    >
                      删除
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 4"
                      style="color: #5d8bc4;cursor:auto;"
                    >
                      完成
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 5"
                      style="color: #5d8bc4;cursor:auto;"
                    >
                      完成
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 6"
                      style="color: #f56c6c;cursor:auto;"
                    >
                      超时
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 7"
                      style="color: #e6a23c;cursor:auto;"
                    >
                      停止
                    </CButton>
                    <CButton
                      disabled
                      block
                      variant="ghost"
                      v-if="item.status == 8"
                      style="color: #ccc;cursor:auto;"
                    >
                      待执行
                    </CButton>
                    <CButton
                     disabled
                      block
                      variant="ghost"
                      v-if="item.status == 10"
                     style="color: #ffab3f;cursor:auto;"
                   >部分失败</CButton
          >
                  </td>
                </template>
              </CDataTable>
            </CRow>
          </CCol>
        </div>
        <div class="resource-monitor-wrapper">
          <CCol class="resource-monitor-col">
            <div class="tab-header">
              <div class="left-group1" @click="toSourceMonitor">
                <img
                  src="../../../public/img/分类条.png"
                  alt
                  class="selectimgstyle"
                />
                <span class="span1style" title="点击进入资源监控" style="cursor:pointer;">资源监控</span>
              </div>
            </div>
            <div class="resource-chartDiv">
              <div style="width: 100%; height: 180px; margin-top: 30px">
                <div class="test">
                  <div id="main2" class="main-chart"></div>
                  <div class="content" v-if="Sharedspace" style="top: 65px">
                    <div class="chart-fontStyle" style="font-size: 24px;">
                      {{ rate }}
                    </div>
                    <div class="chart-fontStyle"  style="cursor:default;">共享存储</div>
                    <div class="chart-fontStyle">
                      {{   option2.series[0].data[0].value.toFixed(2) }}/{{ (option2.series[0].data[0].value+option2.series[0].data[1].value).toFixed(2) }}(TB)
                    </div>
                  </div>
                </div>

                <div class="test">
                  <div id="main3" class="main-chart"></div>
                  <div class="content" v-if="Nodemanagement">
                    <div class="chart-fontStyle" style="font-size: 24px">
                      {{ taskper }}
                    </div>
                    <div class="chart-fontStyle">当日任务</div>
                    <div class="chart-fontStyle">
                      {{ tasksuccess }}/{{ taskall }}(个)
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="resource-percent">
              <CRow class="one-row">
                <span class="colnamestyle">内存</span>
                <CCol
                  col="10"
                  id="resource-RAM-col"
                  class="ccolstyle chartstyle"
                ></CCol>
              </CRow>
              <CRow class="two-row">
                <span class="colnamestyle">CPU</span>
                <CCol
                  col="10"
                  id="resource-CPU-col"
                  class="ccolstyle chartstyle"
                ></CCol>
              </CRow>
              <CRow class="two-row">
                <span class="colnamestyle">本地存储</span>
                <CCol
                  col="10"
                  id="resource-memory-col"
                  class="ccolstyle chartstyle"
                ></CCol>
              </CRow>
            </div>
          </CCol>
        </div>
      </div>
      <div class="map-wrapper">
        <div style="height: auto; background-color: #fff; border-radius: 5px">
          <div class="admionMapControllWrapper">
            <div class="mapselect">
              <div class="cityselect">
                <span class="demonstration adminfontsize">区域选择</span>
                <!-- 行政区域选择 -->
                <Cascader
                  :data="options"
                  v-model="optionsvalue"
                  trigger="click"
                  class="cascaderStyle"
                  @on-change="handleChangeProvince($event)"
                ></Cascader>
                <span class="adminfontsize" style="margin-left: 6px">省</span>
                <Cascader
                  ref="clearress"
                  :data="citys"
                  trigger="click"
                  class="cascaderStyle"
                  @on-change="handleChangeArea($event)"
                ></Cascader>
                <span class="adminfontsize" style="margin-left: 6px">市</span>

                <!-- 时间选择 -->
                <span class="demonstration adminfontsize"> 时段选择 | </span>
                <CButton
                  class="timeBtn"
                  :class="{ bg: increase == 3 }"
                  @click="changeTime(3)"
                  >当日</CButton
                >
                <CButton
                  class="timeBtn"
                  :class="{ bg: increase == 4 }"
                  @click="changeTime(4)"
                  >近一周</CButton
                >
                <CButton
                  class="timeBtn"
                  :class="{ bg: increase == 5 }"
                  @click="changeTime(5)"
                  >近一月</CButton
                >
                <div class="demonstration">自定义</div>
                <el-date-picker
                  style="width: 220px; margin-left: 4px"
                  @change="mysubmittime"
                  v-model="customTime"
                  aotocomplete="off"
                  type="daterange"
                ></el-date-picker>
              </div>
            </div>
            <!-- 图例注释 -->
            <!-- <div class="legendstyle">
                          <Legend></Legend>
            </div>-->

            <div id="map" ref="themap"></div>
          </div>
        </div>

        <!-- <div class="carouse">
          <div class style="height: 40px">
            <div style="height: 10px"></div>
            <img
              src="../../../public/img/分类条.png"
              alt
              class="selectimgstyle"
            />
            <span class>成果展示</span>
          </div>
          <Carousel class="carouseSty"></Carousel>
        </div> -->
      </div>
    </div>
    <div class="popContainer" v-if="showPop"></div>
    <!-- <div><Carousel style="width:1200px"></Carousel></div> -->
    <TheFooter v-if="isFooter"></TheFooter>
  </div>
</template>
<script>
const Taskfields = [
  {
    label: "序号",
    key: "number",
    _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "任务名称",
    key: "groupTaskName",
    _style: "width:247px;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "状态",
    key: "show_details2",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
var spirit = "../assets/icons/AK-YKgreen.png";
var maxData = 100;
var CpuTotal = 244;
import Carousel from "./Carousel";
import axios from "axios";
import TheFooter from "@/containers/TheFooter";

export default {
  name: "adminHome",
  components: {
    Carousel,
    TheFooter,
  },
  paginationProps: {
    align: "center",
    doubleArrows: false,
    previousButtonHtml: "prev",
    nextButtonHtml: "next",
  },
  data() {
    return {
      provinceInfo: {},
      initMapRegion: null,
      isFooter: isFooter,
      tableHeight: "",

      columns: [
        {
          title: "序号",
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "任务名称",
          key: "groupTaskName",
        },
        {
          title: "状态",
          slot: "show_details2",
          key: "show_details2",
          width: 80,
          align: "center",
        },
      ],

      rectangeRange: [], //矢量图外接矩形范围

      currentGeometry: "",
      regionTag: "all", //当前范围all 省 province  市 city 区 region(暂时无)
      disAddLineLayer: "AddLayer",
      Taskdata: [],
      Taskfields,
      ImgFillData: [],
      optionsvalue: [],
      loading: false,
      showPop: false,
      cputotal: 0,
      taskDetailTotal: 0,
      cpuuse: 0,
      taskall: 0,
      tasksuccess: 0,
      taskper: "",
      mapzoom: "off",
      Nodemanagement: false,
      Sharedspace: false,
      midpointOfDemand: [],
      demandBoundary: {},
      startTime: "",
      endTime: "",
      increase: 4,
      // start
      // .......................
      oldpointcenter: "",
      line: "",
      rate: "",
      opttotal: "",
      pointlinearr: [],
      mapfilldata: [],
      mapfilldataarr: [],
      mapfilldataarrs: [],
      getMemorydata: 0,
      getDiskUsedata: 0,
      getCpudata: 0,

      customTime: "",

      // end
      optionecharta: {
        tooltip: {},
        xAxis: {
          show: false,
          max: 100,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#DCE4ED",
            },
          },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: [],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#DCE4ED",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 200,
          left: 70,
          right: 100,
        },
        series: [
          {
            // current data
            color: "#00a172",
            type: "pictorialBar",
            symbol: "../assets/icons/AK-YKgreen.png",
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 15,
            symbolBoundingData: 100,
            data: [0],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "green",
                type: "dotted",
                opacity: 0.2,
                width: 2,
              },
              // data: [{
              //     type: 'max'
              // }]
            },
            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 1,
                color: "#DCE4ED",
              },
            },
            label: {
              show: true,
              formatter: function (params) {
                //  return ((params.value / CpuTotal) * 100).toFixed(2) + " %";
                return (100 - params.value).toFixed(2) + " %";
              },
              position: "right",
              offset: [12, 2],
              color: "rgb(60, 75, 100)",
              fontSize: 16,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: "../assets/icons/AK-YKgreen.png",
            symbolSize: 15,
            symbolBoundingData: 100,
            data: [0],
            z: 5,
          },
        ],
      },
      optionechartb: {
        tooltip: {},
        xAxis: {
          show: false,
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#DCE4ED",
            },
          },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: [],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#999",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 200,
          left: 70,
          right: 100,
        },
        series: [
          {
            color: "#3f71b6",
            // current data
            type: "pictorialBar",
            symbol: "../assets/icons/AK-YKgreen.png",
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 15,
            symbolBoundingData: maxData,
            data: [891],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "green",
                type: "dotted",
                opacity: 0.2,
                width: 2,
              },
              // data: [{
              //     type: 'max'
              // }]
            },
            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 1,
                color: "#DCE4ED",
              },
            },
            label: {
              show: true,
              formatter: function (params) {
                return (100 - (params.value / maxData) * 100).toFixed(2) + " %";
              },
              position: "right",
              offset: [12, 2],
              color: "rgb(60, 75, 100)",
              fontSize: 16,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 15,
            symbolBoundingData: maxData,
            data: [891],
            z: 5,
          },
        ],
      },
      optionechartc: {
        tooltip: {},
        xAxis: {
          show: false,
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: [],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#DCE4ED",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 200,
          left: 70,
          right: 100,
        },
        series: [
          {
            color: "#feb100",
            // current data
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 15,
            symbolBoundingData: maxData,
            data: [891],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "green",
                type: "dotted",
                opacity: 0.2,
                width: 2,
              },
              // data: [{
              //     type: 'max'
              // }]
            },
            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 1,
                color: "#DCE4ED",
              },
            },
            label: {
              show: true,
              formatter: function (params) {
                return (100 - (params.value / maxData) * 100).toFixed(2) + " %";
              },
              position: "right",
              offset: [12, 2],
              color: "rgb(60, 75, 100)",
              fontSize: 16,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 15,
            symbolBoundingData: maxData,
            data: [891],
            z: 5,
          },
        ],
      },
      areas: [],
      citys: [],
      value: [],

      options: [],
      // end
      map: null,
      // 算法统计
      todayTotal: 0,
      websock: null,
      total: 0,
      dynamic: [],
      divoff: false,
      divshow: true,
      valnum: "8989",
      numSize: 0,
      numNumber: 0,
      userTotal: "",
      newUser: "",
      nowDate: "",
      today: "",
      items: [],
      adminOrder: [],
      statisticsNum: [],
      fields: [
        {
          key: "number",
          label: "序号",
          _style: "background:rgba(241,244,249,1);width:10%",
          align: "center",
        },
        {
          key: "option",
          label: "操作",
          _style: "background:rgba(241,244,249,1);width:90%",
          align: "center",
        },
      ],
      fields1: [
        {
          key: "groupTaskName",
          className: "oederleft",
          label: "任务名称",
          _style:
            "width:40%;text-align: center;background:rgba(241,244,249,1);",
        },
        {
          key: "endTime",
          label: "完成时间",
          _style:
            "width:30%;text-align: center;background:rgba(241,244,249,1);",
        },
        {
          key: "show_details2",
          label: "执行状态",
          _style:
            "width:15%;text-align: center;background:rgba(241,244,249,1);",
        },
        {
          key: "show_details1",
          label: "优先级",
          _style:
            "width:15%;text-align: center;background:rgba(241,244,249,1);",
        },
      ],
      fields2: [
        {
          key: "id",
          label: "任务名称",
          _style: "background:rgba(241,244,249,1);",
        },
        {
          key: "username",
          label: "完成时间",
          _style: "background:rgba(241,244,249,1);",
        },
        {
          key: "algorithmName",
          label: "执行状态",
          _style: "background:rgba(241,244,249,1);",
        },
        {
          key: "count",
          label: "优先级",
          _style: "background:rgba(241,244,249,1);",
        },
      ],
      perPage: 10,
      AIToday: "0",
      SIASToday: "0",
      OrthoToday: "0",
      echartsoption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          x: "right", // 'center' | 'left' | {number},
          data: ["已处理量(GB)", "未处理量(GB)"],
        },
        grid: {
          left: "3%",
          bottom: "4%",
          right: "16%",
          containLabel: true,
        },
        yAxis: {
          name: "(GB)",
          type: "value",
        },
        xAxis: {
          name: "(星源)",
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五"],
          axisLabel: {
            interval: 0,
            rotate: -20,
          },
        },
        series: [
          {
            name: "总量",
            type: "bar",
            barGap: "-100%",
            barWidth: 35, // 左移100%，stack不再与上面两个在一列
            label: {
              position: "insideRight",
              normal: {
                show: true,
                position: "top", //  位置设为top
                formatter: "{c}",
                textStyle: { color: "#000" },
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0.3)", // 仍为透明
              },
            },
            data: [0, 434, 402, 468, 480, 560, 530],
          },
          {
            color: "#205eb2",

            name: "已处理量(GB)",
            barWidth: 35,
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight",
            },
            data: [0, 302, 301, 334, 390, 330, 320],
          },
          {
            color: "#5d97d2",
            barWidth: 35,
            name: "未处理量(GB)",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight",
            },
            data: [0, 132, 101, 134, 90, 230, 210],
          },
        ],
      },
      optionsCpu: {
        title: {
          text: "CPU使用情况",
          left: "center",
          bottom: 15,
        },
        series: [
          {
            name: "CPU使用情况",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 0 }],
            detail: {
              fontSize: 15,
            },
            splitNumber: 5,
            radius: "80%",
            center: ["50%", "50%"],
            axisLine: {
              //坐标轴线
              // 设置仪表盘颜色范围
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10, // 半径（环的宽度）
              },
            },
            // axisTick:{
            //     length:5,//属性length控制线长
            //   },
            splitLine: {
              //分割线
              length: 5,
              lineStyle: {
                width: 1,
              },
            },
          },
        ],
      },

      option1: {
        //right
        tooltip: {
          trigger: "item",
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },
        series: [
          {
            width: 200,
            height: 200,

            top: -10,
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              // label: {
              //     show: true,
              //     fontSize: '30',
              //     fontWeight: 'bold'
              // }
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 7,
                name: "成功任务(个)",
                itemStyle: { color: this.$store.state.colorPick },
              },
              {
                value: 7,
                name: "剩余任务(个)",
                itemStyle: { color: "#dce4ed" },
              },
            ],
          },
        ],
      },
      option2: {
        //left
        tooltip: {
          // trigger: "item",
          trigger: "item",
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          formatter:function(params){ 
            console.log(params,'111');
            let dotHtml = params.marker
             let a =parseFloat(params.data.value).toFixed(2)
           params.data.value = a;
              if(params.data.name == '空闲空间(T)'){
                   
           return  dotHtml +'空闲空间(T)' +':' +a
              }
              else {
                return dotHtml +'已用空间(T)' +':' + a
              }
        
          }
        },
        series: [
          {
            width: 200,
            height: 200,

            top: -10,
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              // label: {
              //     show: true,
              //     fontSize: '30',
              //     fontWeight: 'bold'
              // }
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1.7,
                name: "已用空间(T)",
                itemStyle: { color: this.$store.state.colorPick },
              },
              {
                value: 8.3,
                name: "空闲空间(T)",
                itemStyle: { color: "#dce4ed" },
              },
            ],
          },
        ],
      },

      optionsMe: {
        title: {
          // text: "内存使用情况",
          left: "center",
          bottom: 15,
        },
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "内存使用情况",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 0 }],
            detail: {
              fontSize: 15,
            },
            splitNumber: 5, //分割线之间分割的刻度数
            radius: "80%",
            center: ["50%", "50%"],
            axisLine: {
              //仪表盘轴线相关配置

              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10, // 半径（环的宽度）
              },
            },
            splitLine: {
              length: 5,
              lineStyle: {
                width: 1,
              },
            },
          },
        ],
      },
      optionPan: {
        title: {
          // text: "磁盘使用情况",
          left: "center",
          bottom: 15,
        },
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "磁盘使用情况",
            type: "gauge",
            // radius: '80%',//仪表盘半径
            detail: { formatter: "{value}%" },
            data: [{ value: 0 }],
            detail: {
              fontSize: 15,
            },
            splitNumber: 5,
            radius: "80%",
            center: ["50%", "50%"],
            axisLine: {
              // 设置仪表盘颜色范围
              lineStyle: {
                color: [[1, "#91c7ae"]],
                // 属性lineStyle控制线条样式
                width: 10, // 半径（环的宽度）
              },
            },
            splitLine: {
              length: 5,
              lineStyle: {
                width: 1,
              },
            },
          },
        ],
      },
    };
  },
  created() {
    // this.initWebSocket();
    if (productionOrEngine!=="production") {
      this.checkTokenValid();
    }

    this.dataStatistics();
  },
  mounted() {


      this.shareGTtk();
    this.getTaskMonitorData();

    this.searchprovince();
    this.nowDate = this.$moment().format("YYYY年MM月DD日");
    let time = this.$moment(new Date()).valueOf() / 1000;

   // this.shareGT();
   /* this.getCpu(time);*/
   // this.getDiskInfo();
    //this.getMemoryInfo();

    // this.operatingRecord();
    this.imageMetaDataCount();
    this.getMemory(time);
    //  this.getDiskUse(time);
    this.lately();

    this.initMap();
    this.getInitMapRegion(); //获取初始化时地图窗口大小
  },
  methods: {
    toDetail(data){
   //   /taskManage/allTask/2464/正射质检入库_pieadmin_20211207%2017:7?from=taskLook&taskType=2
    this.$router.push({
      path: '/taskManage/allTask/'+data.id+'/'+data.groupTaskName+'?from=taskLook&taskType='+data.taskType
    })
  console.log(' /taskManage/allTask/'+data.id+'/'+data.groupTaskName+'?from=taskLook&taskType='+data.taskType);
    },
    totaskMonitor(){
    this.$router.push({
      path:"/taskManage"
    })
    },
    toSourceMonitor(){
this.$router.push({
      path:"/monitor"
    })
    },
    getInitMapRegion() {
      if (this.regionTag === "all" && !this.initMapRegion) {
        this.initMapRegion = this.get_geometry();
      }
    },
    mysubmittime() {
      this.increase = 0;
      let val1 = new Date("'" + this.customTime[0] + "'");
      let val2 = new Date("'" + this.customTime[1] + "'");
      this.startTime = this.formatDate(val1);
      this.endTime = this.formatDate(val2);
      let tempgeometry = this.getQueryGeometry();
      this.getqueryInfoByRange(tempgeometry);
    },
    //获得本周的开端日期
    getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
      let weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
      return this.formatDate(weekStartDate);
    },

    //获得本周的停止日期
    getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
      let weekEndDate = new Date(
        nowYear,
        nowMonth,
        nowDay + (7 - nowDayOfWeek)
      );
      return this.formatDate(weekEndDate);
    },
    //格局化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },

    // 根据时间的范围  查询时间段内的任务
    changeTime(index) {
      if (this.customTime) {
        this.customTime = "";
      }

      this.increase = index;
      if (index === 3) {
        //day
        let toDayDate = new Date();
        let year = toDayDate.getFullYear(); //得到年份
        let month = toDayDate.getMonth() + 1; //得到月份
        let date = toDayDate.getDate(); //得到日期

        if (month < 10) {
          month = "0" + month;
        }
        this.startTime = year + "-" + month + "-" + date;
      } else if (index === 4) {
        //week
        this.getCurrentWeekTime();
      } else if (index === 5) {
        //nearMonth
        this.getNearMonthTime();
      } else {
        // 待处理
      }
      let tempgeometry = this.getQueryGeometry();
      this.getqueryInfoByRange(tempgeometry);
    },
    getCurrentWeekTime() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1; //0-11表示1-12月
      var day = now.getDate();
      var dateObj = {};
      dateObj.now = year + "-" + month + "-" + day;
      if (day - 7 <= 0) {
        //如果在当月7日之前
        var lastMonthDay = new Date(year, parseInt(month) - 1, 0).getDate(); //1周前所在月的总天数
        if (month - 1 <= 0) {
          //如果在当年的1月份
          dateObj.last = year - 1 + "-" + 12 + "-" + (31 - (7 - day));
        } else {
          dateObj.last =
            year + "-" + (month - 1) + "-" + (lastMonthDay - (7 - day));
        }
      } else {
        dateObj.last = year + "-" + month + "-" + (day - 7);
      }
      this.startTime = dateObj.last;
      this.endTime = dateObj.now;
    },
    getNearMonthTime() {
      var now1 = new Date();
      var year = now1.getFullYear();
      var month = now1.getMonth() + 1; //0-11表示1-12月
      var day = now1.getDate();
      var dateObj = {};
      dateObj.now = year + "-" + month + "-" + day;
      var nowMonthDay = new Date(year, month, 0).getDate(); //当前月的总天数
      if (month - 1 <= 0) {
        //如果是1月，年数往前推一年<br>
        dateObj.last = year - 1 + "-" + 12 + "-" + day;
      } else {
        var lastMonthDay = new Date(year, parseInt(month) - 1, 0).getDate();
        if (lastMonthDay < day) {
          //1个月前所在月的总天数小于现在的天日期
          if (day < nowMonthDay) {
            //当前天日期小于当前月总天数
            dateObj.last =
              year +
              "-" +
              (month - 1) +
              "-" +
              (lastMonthDay - (nowMonthDay - day));
          } else {
            dateObj.last = year + "-" + (month - 1) + "-" + lastMonthDay;
          }
        } else {
          dateObj.last = year + "-" + (month - 1) + "-" + day;
        }
      }
      this.startTime = dateObj.last;
      this.endTime = dateObj.now;
    },
    // 选择  省份的坐标
    searchprovince() {
      let self = this;
      let path = this.$api.homeLoginOthers.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: 0,
          }
        ],
        queryResultList: ["name", "code", "bounds", "center_point"]
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      self.http.postText(path, sendData).then((res) => {
        if (res.data.code == 0) {
          let province = res.data.data.data;
          self.options = [];
          for (let i = 0; i < province.length; i++) {
            let obj = {};
            obj["name"] = province[i].properties.name;
            obj["code"] = province[i].properties.code;
            obj["bounds"] = province[i].properties.bounds;
            obj["tag"] = "province";
            let tempdata = {
              value: obj,
              label: province[i].properties.name,
            };
            self.options.push(tempdata);
          }
        }
      });
    },

    // 选择 市区的坐标
    searchCity(code) {
      let self = this;
      self.citys = [];
      let path = this.$api.homeLoginOthers.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "parent_code",
            fieldValue: code,
            relationNextOne: "AND",
          },
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: 1,
          },
        ],
        queryResultList: ["name", "code", "bounds", "center_point"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      self.http.postText(path, sendData).then((res) => {
        let city = res.data.data.data;
        for (let i = 0; i < city.length; i++) {
          let obj = {};
          obj["name"] = city[i].properties.name;
          obj["code"] = city[i].properties.code;
          obj["bounds"] = city[i].properties.bounds;
          obj["tag"] = "city";

          let citytempdata = {
            value: obj,
            label: city[i].properties.name,
          };
          self.citys.push(citytempdata);
        }
      });
    },

    resetMap() {
      let self = this;
      self.map.setZoom(4);
      if (self.map.getLayer("area") != null) {
        self.map.removeLayer("area");
        if (self.map.getSource("maine") != null) {
          self.map.removeSource("maine");
        }
      }
    },

    /*
     * 接口功能 请求返回热力中心点
     * 接口输入 时间 经纬度范围
     * 接口输出 中心点坐标 任务详情信息
     * 接口简单逻辑
     */
    queryInfoByRange(data) {
      let self = this;
      // 判断热力中心集合不为空，清除重绘，为空跳过
      if (self.mapfilldataarr.length != 0) {
        for (let ni = 0; ni < self.mapfilldataarr.length; ni++) {
          self.map.removeLayer(self.mapfilldataarr[ni]);
          self.map.removeSource(self.mapfilldataarr[ni]);
        }
        self.mapfilldataarr = [];
      }
      if (self.startTime == "") {
        // let toDayDate = new Date();
        // let year = toDayDate.getFullYear(); //得到年份
        // let month = toDayDate.getMonth(); //得到月份
        // let date = toDayDate.getDate(); //得到日期
        // month = month + 1;
        // if (month < 10) {
        //   month = "0" + month;
        // }
        // let timestr = year + "-" + month + "-" + date;
        self.startTime = this.$moment().format("YYYY-MM-DD");
        self.endTime = this.$moment().format("YYYY-MM-DD");
      }
      let params = {
        startTime: self.startTime,
        endTime: self.endTime,
        geometry: data,
      };
      let path = this.$api.homeLoginOthers.queryInfoByRange;
      self.http.post(path, params).then((res) => {
        let admmapdata = res.data.data.features;
        for (let i = 0; i < admmapdata.length; i++) {
          let pointline = "point" + i;
          // 中心点
          self.mapfilldata = admmapdata[i].geometry.coordinates;
          // 提示信息
          var saySation = `
          <p>城市:
          ${admmapdata[i].properties.city_name}
          </p><p>总任务个数:
            ${admmapdata[i].properties.total}
           </p><p>成功任务数:
            ${admmapdata[i].properties.successNum}
           </p><p>失败任务数:
            ${admmapdata[i].properties.failFailNum}
           </p><p>执行中任务:
            ${admmapdata[i].properties.runningNum}
           </p>
          `;
          // 绘制的圆圈大小
          let around = 23 + 2 * admmapdata[i].properties.total;
          if (around > 40) {
            around = 40;
          }
          // 中心点集合
          self.mapfilldataarr.push(pointline);

          // 测试  热力图随地图的缩放改变相对大小
          let geojson = {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  description: saySation,
                  icon: "art-gallery",
                },
                geometry: {
                  type: "Point",
                  coordinates: self.mapfilldata,
                },
              },
            ],
          };

          self.map.addSource(pointline, {
            type: "geojson",
            data: geojson,
          });
          self.map.addLayer({
            id: pointline,
            type: "circle",
            source: pointline,
            paint: {
              "circle-radius": around,
              // 25,  //默认热力图最小尺寸
              // 40,  //默认热力图最大尺寸
              "circle-color": "#3887be",
              "circle-opacity": 0.7,
            },
          });
          self.mousesub(pointline);
        }
      });
    },

    // 绘制市区的范围
    handleChangeArea(item) {
      let self = this;
      if (item.length > 0) {
        let data = item[0];
        self.rectangeRange = JSON.parse(data.bounds);
        self.drawGeometryByCode(data);
      } else {
        self.rectangeRange = JSON.parse(self.provinceInfo.bounds);
        self.drawGeometryByCode(self.provinceInfo);
      }
    },
    handleChangeProvince(item) {
      let data = item[0];
      let self = this;
      if (self.map.getLayer("area") != null) {
        self.map.removeLayer("area");
        if (self.map.getSource("maine") != null) {
          self.map.removeSource("maine");
        }
      }
      if (item.length != 0) {
        self.rectangeRange = JSON.parse(data.bounds);
        self.provinceInfo = data;
        self.drawGeometryByCode(data);
        self.searchCity(data.code);
        self.$refs.clearress.clearSelect();
      } else {
        self.map.setZoom(4);
        self.citys = [];

        this.regionTag = "all";
        self.provinceInfo = {};
      }
    },

    drawGeometryByCode(item) {
      let _this = this;
      let path = this.$api.homeLoginOthers.queryFeatureBase64;
      let type = 0; //default province
      if (item.tag === "city") type = 1;
      else if (item.tag === "region") type = 2;

      let param = {
        collectionName: "area_info",
        orderColName: "",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: type,
            relationNextOne: "AND",
          },
          {
            compareOp: "=",
            fieldName: "code",
            fieldValue: item.code,
          },
        ],
        queryResultList: ["wkb_geometry"],
      };
      let strJson = JSON.stringify(param);
      // console.log('base参数内容：',this.$Base64.encode(strJson));
      let sendData = this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        if (res.data.code == 0) {
          let geometry = [];
          if (data.length < 1) {
            _this.$Message.info("获取范围失败");
            return;
          }
          geometry.push(data[0].geometry);
          // _this.centerPoint = JSON.parse(data.data[0].properties.center_point);
          // _this.rectangeRange = JSON.parse(data.data[0].properties.bounds);
          _this.drawGeometry(geometry);
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    //根据范围渲染地图矢量范围
    drawGeometry(item) {
      let self = this;
      this.regionTag = "region"; //省 和市暂时统一为region 用于时间选择查询当前范围内的影像
      if (item.length == 0) {
        self.resetMap();
      } else {
        self.demandBoundary = item[0];
        self.clearRedAndGreenLine();
        let geometry = self.getQueryGeometry();
        self.getqueryInfoByRange(geometry); //(item[0]);
        if (self.map.getSource("maine") != null) {
          self.map.getSource("maine").setData(item[0]);
        } else {
          self.map.addSource("maine", {
            type: "geojson",
            data: {
              type: "Feature",
              geometry: item[0],
            },
          });
          self.map.addLayer({
            id: "area",
            type: "fill",
            source: "maine",
            layout: {},
            paint: {
              "fill-color": "#088",
              "fill-opacity": 0.8,
            },
          });
        }
        self.showToCenter();
        self.currentGeometry = item[0];
      }
    },
    showToCenter() {
      let _this = this;
      // 计算 并 移动到中心点
      let minGlobalX = 180,
        minGlobalY = 90,
        maxGlobalX = -180,
        maxGlobalY = -90;
      if (_this.rectangeRange.length < 1) return;

      let long = []; //经度
      let lat = []; //纬度
      _this.rectangeRange.forEach((element) => {
        long.push(element[0]);
        lat.push(element[1]);
      });
      long = this.unique(long);
      lat = this.unique(lat);

      minGlobalX = Math.min(...long); //_this.rectangeRange[1][0]; //long
      minGlobalY = Math.min(...lat); //_this.rectangeRange[3][1];
      maxGlobalX = Math.max(...long); //_this.rectangeRange[3][0];
      maxGlobalY = Math.max(...lat); //_this.rectangeRange[1][1]; //lat

      let centerGlobalX = 0;
      let centerGlobalY = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        centerGlobalX = 116.4;
        centerGlobalY = 39.9;
      } else {
        centerGlobalX = (minGlobalX + maxGlobalX) / 2;
        centerGlobalY = (minGlobalY + maxGlobalY) / 2;
      }

      let centermoddle = [];
      centermoddle.push(centerGlobalX);
      centermoddle.push(centerGlobalY);
      //视图范围比数据范围大20%
      let viewWidth = 0;
      let viewHeight = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        viewWidth = (minGlobalX - maxGlobalX) * 0.8; //1.2
        viewHeight = (minGlobalY - maxGlobalY) * 0.8;
      } else {
        viewWidth = (maxGlobalX - minGlobalX) * 0.8;
        viewHeight = (maxGlobalY - minGlobalY) * 0.8;
      }

      let ratio = Math.sqrt(Math.sqrt(Math.sqrt(3))); //2 //视图范围每扩大或缩小ratio倍，缩放等级对应减少或增加0.125

      let indexX = 6; // 6; //初始缩放等级为7
      let zoomBaseX = 5.96; //缩放等级为7时，经度范围为5.96
      if (viewWidth > zoomBaseX) {
        //如果实际范围比基准范围大，基准范围按比例扩大，直至大于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX * ratio) < viewWidth) {
          indexX -= 0.125;
        }
      } else {
        //如果实际范围比基准范围小，基准范围按比例缩小，直至小于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX / ratio) > viewWidth) {
          indexX += 0.125;
        }
      }

      let indexY = 6; //初始缩放等级为7
      let zoomBaseY = 1.91; //缩放等级为7时，纬度范围为1.91
      if (viewHeight > zoomBaseY) {
        while ((zoomBaseY = zoomBaseY * ratio) < viewHeight) {
          indexY -= 0.125;
        }
      } else {
        while ((zoomBaseY = zoomBaseY / ratio) > viewHeight) {
          indexY += 0.125;
        }
      }

      //在经纬度分别获取的缩放等级中，获取比较小的值作为缩放等级，确保数据能完全显示
      let index = indexX < indexY ? indexX : indexY;
      _this.map.flyTo({
        center: centermoddle,
        zoom: index, // 缩放比例
      });
    },
    unique(arr) {
      let hash = [];
      for (let i = 0; i < arr.length; i++) {
        if (hash.indexOf(arr[i]) === -1) {
          hash.push(arr[i]);
        }
      }
      return hash;
    },
    // 初始化加载地图  地图上的操作事件 放大 缩小 绘制图框
    initMap() {
      let that = this;
      that.showPop = true;
      that.$loading.show();
      let simple = {
        //四维地球
        version: 8,
        sources: {
          img: {
            type: "raster",
            tiles: [
              "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            ],
          },
        },
        layers: [
          {
            id: "background",
            type: "background",
            paint: {
              "background-color": "#DDDDDD",
            },
          },
          {
            id: "imgtest",
            type: "raster",
            source: "img",
            "source-layer": "bejing_img",
          },
        ],
      };

      // 初始化地图
      this.map = new mapboxgl.Map({
        container: "map", // container id
        style: "./static/map/map.json",
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M",
        // simple, //四维地球
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
        center: [108.4, 39.9],
        zoom: 3, // starting zoom
        minZoom: 1,
        epsg: 4326,
        doubleClickZoom: false,
      });

      // 地图加载完成  进行绘制的操作
      this.map.on("load", function () {
        window.dispatchEvent(new Event("resize"));
        that.showPop = false;
        that.$loading.hide();
        let tempgeometry = that.getQueryGeometry();

        that.getqueryInfoByRange(tempgeometry);
      });

      // 获取地图的层级,判断绘制类型
      this.map.on("zoom", function () {
        // 地图放大回调方法  清除热力图，绘制图框
        if (that.map.getZoom() > 2 && that.mapzoom == "on") {
          that.mapzoom = "off";
          let tempgeometry = that.getQueryGeometry();
          that.getqueryInfoByRange(tempgeometry);
        }
      });

      // 地图平移后 发送请求 进行绘制的操作
      this.map.on("dragend", function () {
        // 重新请求添加
        let tempgeometry = that.getQueryGeometry();
        that.getqueryInfoByRange(tempgeometry);
        // }
      });
    },

    // 红绿框的判断移除
    clearRedAndGreenLine() {
      let that = this;
      let existLayer = that.map.getLayer("mapRedLineId");
      if (existLayer) {
        that.map.removeLayer("mapRedLineId");
      }
      let existSource = that.map.getSource("myRedSource");
      if (existSource) {
        that.map.removeSource("myRedSource");
      }

      let existLayer0 = that.map.getLayer("mapGreenLineId");
      if (existLayer0) {
        that.map.removeLayer("mapGreenLineId");
      }
      let existSource0 = that.map.getSource("mapGreenSource");
      if (existSource0) {
        that.map.removeSource("mapGreenSource");
      }
    },

    // 获取当前视口的坐标
    get_geometry() {
      let that = this;
      let nesw = that.map.getBounds();
      let tempgeometry = {};
      tempgeometry.type = "Polygon";
      tempgeometry.coordinates = [
        [
          [nesw._sw.lng, nesw._ne.lat],
          [nesw._ne.lng, nesw._ne.lat],
          [nesw._ne.lng, nesw._sw.lat],
          [nesw._sw.lng, nesw._sw.lat],
          [nesw._sw.lng, nesw._ne.lat],
        ],
      ];
      return tempgeometry;
    },

    //监听鼠标弹框
    mousesub(places) {
      let self = this;
      // 鼠标移入监听并弹框
      var popup = new mapboxgl.Popup({
        closeButton: false,
      });
      self.map.on("mouseenter", places, function (e) {
        self.map.getCanvas().style.cursor = "pointer";
        var coordinates = [e.lngLat.lng, e.lngLat.lat];
        var description = e.features[0].properties.description;
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }
        popup.setLngLat(coordinates).setHTML(description).addTo(self.map);
      });
      // 鼠标移出监听并关闭弹框
      self.map.on("mouseleave", places, function () {
        self.map.getCanvas().style.cursor = "";
        popup.remove();
      });
    },

    getQueryGeometry() {
      let result = "";
      if (this.regionTag === "all") {
        result = this.get_geometry();
      } else {
        let tempgeometry = {};
        tempgeometry.type = "Polygon";
        tempgeometry.coordinates = this.rectangeRange;
        result = tempgeometry;
      }
      return result;
    },
    // 根据经纬度和范围查询绘框
    getqueryInfoByRange(tempgeometry) {
      let self = this;
      // 判断热力中心集合不为空，清除重绘，为空跳过
      // if (self.mapfilldataarr.length != 0) {
      //   for (let ni = 0; ni < self.mapfilldataarr.length; ni++) {
      //     self.map.removeLayer(self.mapfilldataarr[ni]);
      //     self.map.removeSource(self.mapfilldataarr[ni]);
      //   }
      //   self.mapfilldataarr = [];
      // }

      // for (let ii = 0; ii < self.ImgFillData.length; ii++) {
      //   let existImageLayer = self.map.getLayer(self.ImgFillData[ii]);
      //   if (existImageLayer) {
      //     self.map.removeLayer(self.ImgFillData[ii]);
      //   }
      //   let existImageSource = self.map.getSource(self.ImgFillData[ii]);
      //   if (existImageSource) {
      //     self.map.removeSource(self.ImgFillData[ii]);
      //   }
      // }
      // self.ImgFillData = [];

      //self.clearRedAndGreenLine();
      // 参数时间的获取和判断

      if (!self.startTime && !self.endTime) {
        // self.startTime = this.$moment().format("YYYY-MM-DD");
        // self.endTime = this.$moment().format("YYYY-MM-DD");
        this.getCurrentWeekTime();
        // this.getNearMonthTime();
      }

      let params = {
        startTime: self.startTime,
        endTime: self.endTime,
        geometry: tempgeometry,
      };

      let path = this.$api.homeLoginOthers.queryInfoByRange;

      self.http.post(path, params).then((res) => {
        let features = res.data.data.features;
        if (features.length < 1) {
          self.$Message.info("未查到该范围内的影像框!");
        }
        self.drawLine(features); // 判断绘制  图框  热力图
      });
    },

    getTaskMonitorData() {
      let self = this;
      self.resData = [];
      let path = this.$api.homeLoginOthers.getAllTask;
      let param = {
        pageNum: 1,
        pageSize: 10,
        status: "",
        priority: "",
        startTime: "",
        endTime: "",
        name: "",
      };
      this.http.get(path, param).then((res) => {
        if (res.data.code == 0) {
          if (res.data.data == null) return;
          let resData = res.data.data.dataList;
          let dataa = [];
          for (let i = 0; i < resData.length; i++) {
            // 截取掉时间2
            // let index = resData[i].groupTaskName.lastIndexOf(" ");
            // let groupTaskNameNew2 = resData[i].groupTaskName.substring(
            //   0,
            //   index
            // );
            dataa.push(resData[i]);
          }
          self.Taskdata = dataa;
          for (let i = 0; i < self.Taskdata.length; i++) {
            self.Taskdata[i].number = i + 1;
          }
        } else {
          this.$Message.error("任务监控任务查询失败");
        }
      });
    },

    // 优化  绘框代码的迁出 绘制矢量边界 --红框---绿框
    drawLine(features) {
      let self = this;
      // 红框数据源
      let _RedGeojson = {
        type: "FeatureCollection",
        features: [],
      };

      // 绿框数据源
      let _GreenGeojson = {
        type: "FeatureCollection",
        features: [],
      };

      // //图片的数据源
      // let _Imgagegeojson = {
      //   type: "image",
      //   features: [],
      // };

      if (self.mapzoom == "on") {
        return;
      }

      for (let h = 0; h < features.length; h++) {
        let linecolor = features[h].properties.imageColor;
        let lineid = "mapLine" + h;
        let imagestr = features[h].properties.resultImageThumbList[0];
        var tempdatas = features[h].geometry.coordinates[0];
        if (linecolor == "green") {
          // let imgFill = lineid + "_image";

          // if (self.map.getSource(imgFill)) {
          //   let tempimgdata = [];
          //   for (let i = 0; i < tempdatas[0].length - 1; i++) {
          //     tempimgdata[i] = tempdatas[0][i];
          //   }
          //   let imasource = {
          //     type: "image",
          //     url: imagestr,
          //     coordinates: tempimgdata,
          //   };
          //   self.map.removeSource(imgFill);
          //   self.map.addSource(imgFill, imasource);
          // } else {
          // self.ImgFillData.push(imgFill);
          // //图片填充只需要四个坐标，不需要闭合   图片不能添加到同一个图层
          // let tempimgdata = [];
          // for (let i = 0; i < tempdatas[0].length - 1; i++) {
          //   tempimgdata[i] = tempdatas[0][i];
          // }
          // self.map.addLayer({
          //   id: imgFill,
          //   source: {
          //     type: "image",
          //     url: imagestr,
          //     coordinates: tempimgdata,
          //   },
          //   type: "raster",
          // });
          // }

          let _tempFeature = {
            type: "Feature",
            epsg: 3857,
            properties: {
              valuecolor: "#ff0000",
            },
            geometry: {
              type: "Polygon",
              coordinates: [tempdatas[0]],
            },
          };
          _GreenGeojson.features.push(_tempFeature);
        } else if (linecolor == "red") {
          // continue
          //坐标数据查询填充
          let _tempFeature = {
            type: "Feature",
            epsg: 3857,
            properties: {
              valuecolor: "#ff0000",
            },
            geometry: {
              type: "Polygon",
              coordinates: [tempdatas[0]],
            },
          };

          _RedGeojson.features.push(_tempFeature);
        }
      }

      // 红线框
      let existRedLayer = self.map.getLayer("mapRedLineId");
      if (existRedLayer) {
        self.map.getSource("myRedSource").setData(_RedGeojson);
      } else {
        self.addRedLine(_RedGeojson);
      }

      // 绿框
      let existGreenLayer = self.map.getLayer("mapGreenLineId");
      if (existGreenLayer) {
        self.map.getSource("mapGreenSource").setData(_GreenGeojson);
      } else {
        self.addGreenLine(_GreenGeojson);
      }
    },

    // 添加红线框
    addRedLine(_RedGeojson) {
      let self = this;
      self.map.addSource("myRedSource", { type: "geojson", data: _RedGeojson });
      self.map.addLayer({
        id: "mapRedLineId",
        type: "line",
        // isLngLat: true,
        source: "myRedSource",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "red",
          "line-width": 1,
        },
      });
    },

    // 添加绿线框
    addGreenLine(_GreenGeojson) {
      let self = this;
      self.map.addSource("mapGreenSource", {
        type: "geojson",
        data: _GreenGeojson,
      });
      self.map.addLayer({
        id: "mapGreenLineId",
        type: "line",
        source: "mapGreenSource",

        layout: {},
        paint: {
          "line-color": "green",
          "line-width": 2,
          "line-opacity": 1,
        },
      });
    },

    Resourcemonitoring() {
      this.$router.push({
        path: "/monitor/server",
        query: {
          from: "adminHome",
        },
      });
    },
    // MyOrder() {
    //   this.$router.push({
    //     path: "/order/dataOrder",
    //     query: {
    //       from: "adminHome",
    //     },
    //   });
    //  let path = `/order/dataOrder`;
    // this.$router.push({ path: path });
    // },
    Taskofmonth() {
      this.$router.push({
        path: "/taskManage/allTask",
        query: {
          from: "adminHome",
        },
      });
      // let path = `/taskManage/allTask`;
      // this.$router.push({ path: path });
    },
    //     let path = `/taskManage/taskDetails/${id.id}/${id.startWorkflowId}/${id.status}`;
    // this.$router.push({ path: path });
    checkTokenValid() {
      let self = this;
      let path = this.$api.homeLoginOthers.checkToken;
      self.http.get(path).then((res) => {});
    },
    // 算法插件统计查询
    imageMetaDataCount() {
      let self = this;
      let path = this.$api.homeLoginOthers.imageMetaDataCount;
      self.http.get(path).then((res) => {
        // if (res.data.code == 200) {
        let temp = JSON.parse(res.data.data);
        self.total = temp.total;
        self.todayTotal = temp.todayTotal;
      });
    },
    // 我的订单
    lately() {
      let self = this;
      let path = this.$api.homeLoginOthers.lately;
      self.http.get(path).then((res) => {
        if (res.data.code == 0) {
          self.adminOrder = [];
          self.adminOrder = res.data.data;
          for (let i = 0; i < self.adminOrder.length; i++) {
            if (self.adminOrder[i].endTime == null) {
              self.adminOrder[i].endTime = "";
            }
          }
        } else {
          console.log("我的订单 查询失败");
        }
      });
    },
    //总数据处理量
    dataStatistics() {
      let self = this;
      let path = this.$api.homeLoginOthers.dataStatistics;
      self.http.get(path).then((res) => {
        if (res.data.code == 0) {
          self.numSize = res.data.data.imageSize;
          self.numNumber = res.data.data.imageNumber;
          self.taskDetailTotal = res.data.data.total;
        } else {
        }
      });
    },
    // 最新动态
    operatingRecord() {
      let self = this;
      let path = this.$api.homeLoginOthers.operatingRecord;
      self.http.get(path).then((res) => {
        if (res.data.success) {
          if (res.data.data.length < 1) {
            return;
          }
          for (let i = 0; i < 10; i++) {
            let tempnum = res.data.data[i].operation;
            let arr = tempnum.split("_");
            let temp = {
              taskStatusName: res.data.data[i].taskStatusName,
              type: res.data.data[i].taskStatus,
              option:
                res.data.data[i].createTime +
                " " +
                res.data.data[i].userName +
                " " +
                arr[0],
            };
            self.dynamic.push(temp);
          }
        }
      });
    },
    //首页暂时没有用到websocket
    initWebSocket() {
      const wsuri =
        "ws://" +
        this.$api.homeLoginOthers.webSocketUrl +
        "/sthx_server/task/ws";
      // const wsuri = "ws://piecloud.piesat.cn/sthx_server/task/ws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    //连接建立之后执行send方法发送数据
    websocketonopen() {
      let userId = window.sessionStorage.getItem("userId");
      let msg = '{"topic":"conn","type":"dynamic"}';
      this.websocketsend(msg);
    },
    //连接建立失败重连
    websocketonerror(e) {
      console.log("error", e);
      this.reconnect();
    },
    websocketonmessage(e) {
      let self = this;
      const redata = JSON.parse(e.data);
      if (redata.type == "websocket_dynamic") {
        //动态的信息，将内容追加到列表中
        let arr = redata.content.operation.split("_");
        let temp = {
          option:
            redata.content.createTime +
            " " +
            redata.content.userName +
            " " +
            arr[0],
          type: redata.content.type,
          taskStatusName: redata.content.taskStatusName,
        };
        self.dynamic.splice(0, 0, temp);
        self.dynamic.pop();
      } else if (redata.type == "websocket_error") {
        console.log("建立连接异常信息", redata.content);
        self.websock.close();
      } else {
        // 不处理
      }
    },
    //数据发送
    websocketsend(Data) {
      this.websock.send(Data);
    },
    //关闭
    websocketclose(e) {
      console.log("断开连接", e);
      this.websock.close();
    },
    // 重连操作，通过设置lockReconnect变量避免重复连接
    reconnect() {
      let self = this;
      if (self.lockReconnect) {
        return;
      }
      self.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      tt && clearTimeout(tt);
      var tt = setTimeout(function () {
        self.initWebSocket();
        self.lockReconnect = false;
      }, 5000);
    },

    Dataorder() {
      this.divshow = true;
      this.divoff = false;
    },
    ProductionOrder() {
      this.divshow = false;
      this.divoff = true;
    },
    // 当前月数据接收与处理
    /*   getecharts() {
      let self = this;

      var myChart = this.$echarts.init(document.getElementById("main4"));

      let path = this.$api.homeLoginOthers.dataTypeStatistics;
      self.http.get(path).then((res) => {
        if (res.data.code == 0) {
          self.echartsoption.xAxis.data = [];
          self.echartsoption.series[0].data = [];
          self.echartsoption.series[1].data = [];
          self.echartsoption.series[2].data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            let temp1 =
              Math.floor(
                (res.data.data[i].accept - res.data.data[i].deal) * 100
              ) / 100; //数据量
            let temp4 = res.data.data[i].accept; //数据处理量
            let temp2 = res.data.data[i].deal; //数据处理量
            let temp3 = res.data.data[i].dataType; //数据类型
            if (temp1 == null) {
              temp1 = "--";
            }
            if (temp2 == null) {
              temp2 = "--";
            }
            self.echartsoption.xAxis.data.push(temp3);
            self.echartsoption.series[0].data.push(temp4);
            self.echartsoption.series[1].data.push(temp2);
            self.echartsoption.series[2].data.push(temp1);
          }
          myChart.setOption(self.echartsoption);
        } else {
          // 暂不处理
        }
      });
    },*/

    //当日 任务
    shareGTtk() {
      let self = this;
      let path = this.$api.homeLoginOthers.getSuccessPercent;
      var myChart = this.$echarts.init(document.getElementById("main3"));
      self.http.get(path).then((res) => {
        self.Nodemanagement = true;
        let opt = res.data.data;

        //   self.rate = opt.rate
        self.taskall = opt.all;
        self.tasksuccess = opt.success;
        self.taskper = opt.per;
        //   // use: 17.1
        self.option1.series[0].data[0].value = opt.success;
        self.option1.series[0].data[1].value =
                (opt.all == 0 ? 1 : opt.all) - opt.success;

        myChart.setOption(self.option1);
      });
    },

    // 首页资源监控cpu
    // 首页资源监控内存
    getMemory() {
      let self = this;
      let path = this.$api.monitorApi.getClusterInfo;
      var myChartc = this.$echarts.init(document.getElementById("resource-RAM-col"));

      var myChartCpu = this.$echarts.init(
              document.getElementById("resource-CPU-col")
      );
      var myChartb = this.$echarts.init(
              document.getElementById("resource-memory-col")
      );
      var myChartGx = this.$echarts.init(document.getElementById("main2"));
      this.http.get(path).then(function (res) {
                if (res.status == 200) {
                  let data = res.data.data;
                  self.optionechartc.series[0].data[0] = data.memoryInfo.memoryRate;
                  self.optionechartc.series[1].data[0] = 100 - data.memoryInfo.memoryRate;
                  self.Sharedspace = true;
                  myChartc.setOption(self.optionechartc);

                  self.optionecharta.series[0].data[0] =  data.cpuInfo.avgRate;
                  self.optionecharta.series[1].data[0] = 100 - data.cpuInfo.avgRate;
                  myChartCpu.setOption(self.optionecharta);

                  /*本地存储*/
                  self.optionechartb.series[0].data[0] = data.diskInfo.diskRate;
                  self.optionechartb.series[1].data[0] = 100 - data.diskInfo.diskRate;
                  myChartb.setOption(self.optionechartb);

                  self.option2.series[0].data[0].value =data.shareDiskInfo.shareUsedSize;
                  self.option2.series[0].data[1].value = data.shareDiskInfo.shareTotalSize - data.shareDiskInfo.shareUsedSize;
                  myChartGx.setOption(self.option2);
                }

              });
    },


    getDiskInfo() {
      let self = this;
      let path = this.$api.homeLoginOthers.query;
      // let path = "http://piecloud.piesat.cn/prometheus/api/v1/query?query=";
      axios
        .get(
          path + 'node_filesystem_size_bytes{instance=~"master",mountpoint="/"}'
        )
        .then(function (res) {
          if (res.status == 200 && res.data.status == "success") {
            if (res.data.data.result.length < 1) return;
            let diskTotal = res.data.data.result[0].value[1];
            console.log(
              "diskTotal(单位T)",
              diskTotal / 1024.0 / 1024.0 / 1024.0 / 1024.0
            );
          }
        });
      axios
        .get(
          path + 'node_filesystem_free_bytes{instance=~"master",mountpoint="/"}'
        )
        .then(function (res) {
          if (res.status == 200 && res.data.status == "success") {
            if (res.data.data.result.length < 1) return;
            let diskFree = res.data.data.result[0].value[1];
            console.log(
              "diskFree(单位T)",
              diskFree / 1024.0 / 1024.0 / 1024.0 / 1024.0
            );
          }
        });
    },

  /*  getMemoryInfo() {
      let self = this;
      let path = this.$api.homeLoginOthers.query;
      // let path = "http://piecloud.piesat.cn/prometheus/api/v1/query?query=";
      axios
        .get(path + 'node_memory_MemTotal_bytes{instance=~"master"}')
        .then(function (res) {
          if (res.status == 200 && res.data.status == "success") {
            if (res.data.data.result.length < 1) return;
            let memoryTotal = res.data.data.result[0].value[1];
            console.log(
              "memoryTotal(单位G)",
              memoryTotal / 1024.0 / 1024.0 / 1024.0
            );
          }
        });
      axios
        .get(path + 'node_memory_MemFree_bytes{instance=~"master"}')
        .then(function (res) {
          if (res.status == 200 && res.data.status == "success") {
            if (res.data.data.result.length < 1) return;
            let memoryFree = res.data.data.result[0].value[1];
            console.log(
              "memoryFree(单位G)",
              memoryFree / 1024.0 / 1024.0 / 1024.0
            );
          }
        });
    },*/

  },
  watch: {
    optionsvalue(newval) {
      if (newval.length == 0) {
        this.$refs.clearress.clearSelect();

        this.getqueryInfoByRange(this.initMapRegion);
        this.rectangeRange = this.initMapRegion.coordinates[0]; //tempgeometry.coordinates[0];
        this.showToCenter();
        // this.map.flyTo({
        //   center: [108.4, 39.9],
        //   zoom: 3,
        // });
      }
    },
    options(newval) {
      if (newval == []) {
        this.citys = [];
      }
    },

    ["$store.state.colorPick"]: {
      //深度监视
      handler(newColor) {
        //重绘存储
        let option = {
          //left
          tooltip: {
            // trigger: "item",
            trigger: "item",
            position: function (point, params, dom, rect, size) {
              // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
              // 提示框位置
              var x = 0; // x坐标位置
              var y = 0; // y坐标位置

              // 当前鼠标位置
              var pointX = point[0];
              var pointY = point[1];

              // 外层div大小
              // var viewWidth = size.viewSize[0];
              // var viewHeight = size.viewSize[1];

              // 提示框大小
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];

              // boxWidth > pointX 说明鼠标左边放不下提示框
              if (boxWidth > pointX) {
                x = 5;
              } else {
                // 左边放的下
                x = pointX - boxWidth;
              }

              // boxHeight > pointY 说明鼠标上边放不下提示框
              if (boxHeight > pointY) {
                y = 5;
              } else {
                // 上边放得下
                y = pointY - boxHeight;
              }

              return [x, y];
            },
          },
          series: [
            {
              width: 200,
              height: 200,

              top: -10,
              type: "pie",
              radius: ["60%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                // label: {
                //     show: true,
                //     fontSize: '30',
                //     fontWeight: 'bold'
                // }
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1.7,
                  name: "已用空间(T)",
                  itemStyle: { color: newColor },
                },
                {
                  value: 8.3,
                  name: "空闲空间(T)",
                  itemStyle: { color: "#dce4ed" },
                },
              ],
            },
          ],
        };
        this.option2 = option;
        this.shareGT();

        //重绘任务
        let optionMetion = {
          //right
          tooltip: {
            trigger: "item",
            position: function (point, params, dom, rect, size) {
              // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
              // 提示框位置
              var x = 0; // x坐标位置
              var y = 0; // y坐标位置

              // 当前鼠标位置
              var pointX = point[0];
              var pointY = point[1];

              // 外层div大小
              // var viewWidth = size.viewSize[0];
              // var viewHeight = size.viewSize[1];

              // 提示框大小
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];

              // boxWidth > pointX 说明鼠标左边放不下提示框
              if (boxWidth > pointX) {
                x = 5;
              } else {
                // 左边放的下
                x = pointX - boxWidth;
              }

              // boxHeight > pointY 说明鼠标上边放不下提示框
              if (boxHeight > pointY) {
                y = 5;
              } else {
                // 上边放得下
                y = pointY - boxHeight;
              }

              return [x, y];
            },
          },
          series: [
            {
              width: 200,
              height: 200,

              top: -10,
              type: "pie",
              radius: ["60%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                // label: {
                //     show: true,
                //     fontSize: '30',
                //     fontWeight: 'bold'
                // }
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 7,
                  name: "成功任务(个)",
                  itemStyle: { color: newColor },
                },
                {
                  value: 7,
                  name: "剩余任务(个)",
                  itemStyle: { color: "#dce4ed" },
                },
              ],
            },
          ],
        };
        this.option1 = optionMetion;
        this.shareGTtk();
      },
    },
  },

  destroyed() {
    // this.websock.close();
    this.showPop = false;
    this.$loading.hide();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

/deep/.mapboxgl-canvas {
  width: 100% !important;
  height: calc(100% - 15px) !important;
  border-radius: 5px;
}

.adminHome-vue .admionMapControllWrapper #map {
  border-radius: 0;
  border: 0;
  height: calc(100vh - 85px);
}

.topdivstyle {
  width: 382px;
  height: 100px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid rgba(221, 228, 237, 1);
  margin-top: 20px;
  margin-left: 20px;
  padding: 0;
}

.topleftdivstyle {
  width: 218px;
  height: 100px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid rgba(221, 228, 237, 1);
  margin-top: 20px;
  margin-right: 20px;
  padding-left: 0 !important;
}

.topimgstyle {
  width: 50px;
  height: 50px;
  display: inline-block;

  margin: auto;
  margin-bottom: 35px;
  margin-left: 18px;
  margin-right: 16px;
  filter: saturate(0.7);
}

.outinstyle {
  display: inline-block;
  margin-left: 32px;
  margin-right: 16px;
}

.outinstyle1 {
  display: inline-block;
  margin-left: 611px;
}

.outinstyle2 {
  display: inline-block;
  margin-left: 600px;
}

.topimgstyle1 {
  width: 70px;
  height: 70px;
  display: inline-block;
  margin-top: -18px;
  margin-bottom: 22px;
  margin-left: 19px;
}

.titlestyle {
  width: 132px;
  height: 20px;
  margin-left: 16px;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(64, 64, 64, 1);
  line-height: 20px;
}

.titlestyle1 {
  margin-left: 0px;
  color: #444444;
  font-size: 12px;
}

.titlestyle2 {
  width: 97px;
  height: 40px;

  margin-left: 16px;
  margin-top: 2px;
  margin-bottom: 21px;
  font-size: 1.5rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(64, 64, 64, 1);
  line-height: 40px;
  letter-spacing: 1px;
}

.titlestyle3 {
  width: 54px;
  height: 40px;
  margin-left: 0px;
  margin-top: 2px;
  margin-bottom: 21px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #121212;
  line-height: 39px;
  letter-spacing: 1px;
}

.titlestyles {
  width: 56px;
  height: 20px;

  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(64, 64, 64, 1);
  line-height: 20px;
}

.titlepstyle {
  width: 72px;
  height: 25px;
  margin-left: 25px;

  font-size: 0.6rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(137, 154, 174, 1);
  line-height: 25px;
}

.titlepstyle2 {
  width: 61px;
  height: 35px;
  margin-left: 25px;

  font-size: 1.5rem;
  font-family: MicrosoftYaHei;
  color: rgba(64, 64, 64, 1);
  line-height: 35px;
}

.children {
  color: rgba(0, 201, 148, 1);
  margin-left: 97px;
}

.children1 {
  color: rgba(251, 133, 159, 1);
  margin-left: 80px;
}

.children2 {
  color: rgba(255, 213, 56, 1);
  margin-left: 66px;
}

.colchildren {
  margin-left: 34px;
}

.colchildren1 {
  margin-left: 10px;
}

.colchildren2 {
  margin-left: 10px;
  margin-right: 34px;
}

.data-row {
  margin: 0 auto;
  height: auto;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
}

.jumbotron {
  height: 120px;
}

.jumbotron {
  padding: 1rem 1rem;
}

.display-7 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.spanstyle {
  margin-left: 110px;
}

.pstyle {
  margin-top: 8px;
}

.ccolstyle {
  width: 180px;
  height: 180px;
}

.ccolstylemain {
  margin-left: 12px;
  width: 375px;
  min-width: 375px;
  height: 250px;
}

.colstyle {
  margin-top: 19px;
  width: 225px;
  height: 110px;
  border-radius: 5px;
  border: 2px solid rgba(46, 91, 255, 0.08);
}

.colstyle:hover {
  border-radius: 5px;
  border: 2px solid #2e5bff;
}

.colstyle1 {
  margin-top: 10px;
  width: 225px;
  height: 110px;
  border-radius: 5px;
  border: 2px solid rgba(46, 91, 255, 0.08);
}

.colstyle1:hover {
  border-radius: 5px;
  border: 2px solid #2e5bff;
}

.imageiconstyle {
  width: 20px;
  height: 20px;
}

span {
  margin-left: 7px;
}

.childstyle {
  height: 110px;
}

.childstyleright {
  height: 110px;
}

.childrennum {
  margin-left: 25px;
  margin-top: 25px;
}

.canvastyle {
  margin-top: 40px;
}

.task-monitorTable-row {
  margin-top: 45px;
  background: rgba(255, 255, 255, 1);
}

.middlestyle {
  width: 774px;
  height: 350px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
  border: 1px solid rgba(221, 228, 237, 1);
}

.centerstyle {
  margin-left: 20px;
  width: 25%;
  height: 350px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
  border: 1px solid rgba(221, 228, 237, 1);
}

.bottomstyle {
  width: 774px;
  height: 350px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
  border: 1px solid rgba(221, 228, 237, 1);
}

.selectimgstyle {
  width: 4px;
  height: 18px;
  margin-top: -4px;
  margin-left: 15px;
}

.span1style {
  width: 120px;
  height: 25px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
}

.tablestyle {
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 20px;
}

/* ********** */
.container {
  position: absolute;
  top: 26px;
  padding: 0;
  width: 100%;
  display: flex;
}

.tab-header {
  position: absolute;
  top: 10px;

  width: 100%;
  display: flex;
}

.left-group {
  width: 53px;
  height: 50px;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--label-font-color, #5d8bc4);
  margin: 0 5px 0 10px;
  box-sizing: border-box;
  color: white;
}

.left-group1 {
  width: 180px;
}

.right-group {
  width: 130px;
  margin-right: 10px;
  margin-top: -2px;
}

.righthidden {
  margin-right: 20px;
}

.right-group1 {
  width: 40px;
}

.right-group2 {
  width: 248px;
}

.mid-group {
  flex: 1;
}

.className {
  color: #fff;
  background-color: #000;
}

.carouse {
  position: relative;

  height: 177px;
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #dde4ed;

  background-color: white;
}

.mapselect {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;

  width: 1150px;
  height: auto;
  margin: auto;
  display: flex;
  justify-content: center;
  border-radius: 5px;
}

.legendstyle {
  display: flex;
  position: absolute;
  z-index: 2;
  bottom: 104px;
  margin-left: 18px;
}

.cityselect {
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-left: -20px;
  padding: 5px 10px 3px 0;

  background: rgba(255, 255, 255, 1);
  color: rgb(60, 75, 100);
  /* //#d0d0d0; */
}
/* 
.timeselect {
  width: 494px;
  margin-left: 16px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  color: rgb(60, 75, 100);
}
.timeselect .btn.info {
  height: 26px;
}
.timeselect .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
} */

.adminfontsize {
  font-size: 13px;
}

.colnamestyle {
  margin-left: 20px;
  width: 160px;
}

.el-button.is-round {
  border-radius: 6px;
  padding: 12px 23px;
  margin-left: 5px;
}

.demonstration {
  margin-left: 10px;
}

.chartstyle {
  height: 50px;
  min-width: 375px;
  margin-top: -36px;
  margin-left: 10px;
}

.bg {
  /* background: rgba(255, 255, 255, 0.78);
  color: #383838;
  border-color: #fff; */

  background: var(--hover-color, #5d8bc4);
  box-shadow: 0 0 0;
  border: 0;
}

.admincanvas {
  width: 175px;
  height: 175px;

  display: inline-block;
  z-index: -1;
  margin-top: 40px;
}

.map-wrapper {
  position: relative;
  background-color: #e8e8e8;
  height: auto;
  width: calc(100% - 410px);
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;
}

/* 媒体查询1366 */
@media (min-width: 1366px) and (max-width: 1600px) {
  .ccolstylemain {
    min-width: 389px;
    height: 250px;
  }
  .chartstyle {
    min-width: 389px;
  }
  .admincanvas1 {
    margin-left: 6px;
  }
}

.test {
  width: 50%;
  height: 180px;
  float: left;
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test .content {
  position: absolute;
  top: 47px;
  width: 120px;
  left: 43px;
  text-align: center;
  transform: scale(0.9);
}
#main2,
#main3 {
  width: 100%;
  height: 100%;
}
.popContainer {
  position: fixed;
  top: 81px;
  left: 431px;
  right: 20px;
  height: 660px;
  border: 1px solid white;
  background: rgba(255, 255, 255, 1);
}

/* 修改成品展示缩放页面不会出现变短 */
.carouseSty {
  position: relative;
  /*margin-left: 48px;*/
  width: calc(100vw - 449px) !important;
  display: flex;
}
/deep/.owl-carousel.owl-loaded {
  width: calc(100vw - 537px) !important;
}
/deep/.rightprev {
  height: 112px;
  width: 30px;
  margin-top: 0;
  background: #dce4ed;
}
/deep/.leftprev {
  margin-left: 14px;
}

/*
!* 轮播的媒体查询  *!
@media (min-width: 998px) {
  .carouseSty {
    width: 742px;
  }
}
@media (min-width: 1366px) {
  .carouseSty {
    width: 830px;
  }
  .whiteaction {
    width: 198px;
    !* 轮播item  4 *!
  }
}
@media (min-width: 1400px) {
  .carouseSty {
    width: 1005px;
  }
}
@media (min-width: 1600px) {
  .carouseSty {
    width: 1063px;
  }
  .whiteaction {
    width: 203px;
    !* 轮播item  5 *!
  }
}
@media (min-width: 1700px) {
  .carouseSty {
    width: 1250px;
    !* 轮播item  6 *!
  }
}
@media (min-width: 1750px) {
  .carouseSty {
    width: 1300px;
    !* 轮播item  6 *!
  }
}
@media (min-width: 1800px) {
  .carouseSty {
    width: 1340px;
    !* 轮播item  6 *!
  }
}
@media (min-width: 1860px) {
  .carouseSty {
    width: 1380px;
    !* 轮播item  6 *!
  }
}
@media (min-width: 1920px) {
  .carouseSty {
    width: 1395px;
    !* 轮播item  6 *!
  }
}*/
</style>

<style scoped>
.adminTableClass {
  height: calc(100vh - 660px);
}

/deep/.mapselect .ivu-input {
  margin-top: 4px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #989898;
  color: rgb(60, 75, 100);
}
/deep/.mapselect .ivu-input:hover {
  border: 1px solid #989898;
}

.timeBtn {
  margin-left: 5px;
  padding: 0 5px;
}
.cascaderStyle {
  width: 100px;
  display: inline-block;
  margin-left: 6px;
}

/deep/.el-input__icon {
  height: auto;
}
</style>
